<template>
  <div class="year">
    <div>
      <div class="table">
        <ul class="lz">
          <li v-for="(item, index) of currentPageData" :key="index">
            <div class="img-width" @click="more(item.id)">
              <img class="img-width" :src="IP + item.thumb" alt />
            </div>
            <div class="lz_right" @click="more(item.id)">
              <p class="title1">{{ item.title }}</p>

              <p class="place">
                {{
                item.description.length > 80
                ? item.description.substr(0, 80) + "..."
                : item.description
                }}
              </p>
              <p class="more">详细</p>
            </div>
          </li>
        </ul>
      </div>
      <div id="page">
        <el-pagination
          v-if="totalRow != 0"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :pager-count="5"
          :page-size="pageSize"
          layout="  prev, pager, next"
          :total="totalRow"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      productList: [{}], //所有数据

      currentPage: 1, //当前页数 ，默认为1
      pageSize: 3, // 每页显示数量
      currentPageData: [],
      totalRow: 0,
    };
  },
  created() {
    this.setCurrentPageData();
  },
  components: {},
  props: ["id"],
  methods: {
    more(id) {
      this.$router
        .push({
          path: `/linzhan/basezdetail?id=${id}`,
          query: { orderId: "基本陈列", sort: 27 },
        })
        .catch((err) => {
          err;
        });
    },
    setCurrentPageData() {
      this.$api
        .get(
          `${this.tableList}jibenchenglie-${this.currentPage}-${this.pageSize}`
        )
        .then((res) => {
          // 计算一共有几页
          this.totalRow = res.data.page.totalRow;

          this.currentPageData = res.data.page.list;
          // console.log(this.currentPageData);
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
      }

      // this.page = val;
      this.setCurrentPageData(
        `${this.tableList}jibenchenglie-${this.currentPage}-${this.pageSize}`
      );
    },
  },
};
</script>
<style scoped>
ul,
p,
li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.img-width {
  width: 352px;
  height: 242px;
  cursor: pointer;
}
.year {
  display: flex;
  min-height: 400px;
}

.lz li {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  justify-content: space-between;
  margin-bottom: 45px;
  background: #f5f5f5;
}

.lz_right {
  width: 600px;
  box-sizing: border-box;

  padding: 30px 35px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title1 {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  margin-bottom: 25px;
  cursor: pointer;
}
.place {
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
  cursor: pointer;
}

.more {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
}
.content1 {
  font-size: 12px;
  line-height: 0px;
}
.table {
  margin-bottom: 100px;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
